<template>
  <view class="w-full bg-white">
    <view class="container-wd">
      <image class="product-image" :src="useImage(props.imgs[0])" mode="aspectFill" />
      <view class="product-info">
        <view class="product-title">{{props.info?.typeName}}</view>
        <view class="product-details">
          <text>编号：{{props.info?.productCode}}</text>

          <text>型号：{{props.info?.model}}</text>
          <text>装量：{{props.info?.packagingUnit}}</text>

          <text>材质：{{props.info?.material}}</text>

          <text>单位：{{props.info?.unit}}</text>

          <text>外观包装：{{props.info?.externalPack}}</text>
        </view>
        <view class="product-expiry">
          <text>有效期：{{props.info?.expiryDate}} </text>
          <text class="warning-text">近效期</text>
        </view>
        <view class="product-price">
          <text class="original-price">¥{{ props.info?.selling_price || 0 }}</text>
          <text class="text-red">¥{{ medicationStore.sku.cur?.price || 0 }}</text>
          <text> 折扣原因：512活动</text>
        </view>
      </view>
    </view>
    <view class="product-numbers">
      <text>销售数量：1000</text>

      <text>库存：{{props.info?.num}}</text>

      <text>产地：{{props.info?.originPlace}}</text>

      <text>厂家：{{props.info?.manufacturer}}</text>
      <!-- <text>生产许可证编号：{{props.info?.productionLicense}} </text> -->

      <text>质量层次：{{props.info?.qualityLevel}}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useImage } from '@/hooks';
import { useMedicationStore } from '@/store/modules/medication';
const medicationStore = useMedicationStore();
const props = defineProps({
    info: {
        type: Object,
        default: () => ({})
    },
    imgs: {
        type: Array,
        default: () => []
    }
});
</script>

<style lang="scss">
.container-wd {
  width: 750rpx;
  margin: 0 auto;
  background-color: #fff;
  padding: 20rpx;
  display: flex;
  box-sizing: border-box;

  .product-image {
    width: 200rpx;
    height: 200rpx;
    background-color: #ccc;
    margin-right: 20rpx;
  }

  .product-info {
    overflow: hidden;
    flex: 1;
  }

  .product-title {
    font-size: 24rpx;
    font-weight: bold;
    margin-bottom: 30rpx;
  }

  .product-details {
    margin-bottom: 10rpx;
    font-size: 18rpx;
    display: flex;
    flex-wrap: wrap;
    gap: 12rpx 32rpx;
    line-height: 1.2;
  }

  .product-price {
    font-size: 18rpx;
    margin-top: 12rpx;
  }

  .product-price .original-price {
    text-decoration: line-through;
    margin-right: 5rpx;
  }

  .product-expiry {
    font-size: 18rpx;
  }
  .warning-text {
    color: red;
    font-size: 18rpx;
    transform: translateY(-10rpx);
  }

}

.product-numbers {
  width: 750rpx;
  padding: 20rpx;
  font-size: 18rpx;
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx 48rpx;
  line-height: 1.2;
}
</style>
